<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>jQuery Transitions Test</title>
		<style>
			body{
				font-family:Georgia;
				font-size:13px;
				color:#eee;
				background:url(images/background.jpg);
			}
			
			#box{
				background:rgba(0, 0, 0, 0.5);
				width:500px;
				height:400px;
				margin:auto;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				box-shadow:0 0 15px rgba(0, 0, 0, 0.6);
				-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.6);
				-moz-box-shadow:0 0 15px rgba(0, 0, 0, 0.6);
			}
			#grid{
				padding:0;
				margin:0;
			}
			#grid li{
				display:inline;
				float:left;
			}
			
			#grid li a{
				margin:15px;
				overflow:hidden;
				outline:none;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 4px;
				box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
				-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
				-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
				display:block;
				text-indent:-999px;
				width:80px;
				height:84px;
				background-image:url(images/app.png);
			}
			
			li#wordpress a{
				background:url(images/wordpress.png);
			}
				
			li#mediawiki a{
				background:url(images/mediawiki.png);
			}
			
			li#drupal a
			{
				background:url(images/drupal.png);
			}
			
			.hidden{
				display:none;
			}
			
			.alignleft{
				float:left;
			}
			
			.alignright{
				float:right;
			}
			
			.aligncenter{
				margin:0px auto;
			}
			
			.center{
				text-align:center;
			}
			
			div.transitions{
				position:relative;
				overflow:hidden;
				clear: left;
			}
			div.transitions div.slidecontainer
			{
				width: 450px;
			}
			div.transitions div.slide
			{
				float: left;
				width: 450px;
				height: 450px;
			}
			img.loading{
				position:absolute;
				top:50%;
				left:50%;
				margin-top:-16px;
				margin-left:-16px;
				z-index:500;
			}
			
		</style>
	</head>
	<body>
		<h1>Choose an app!</h1>
	    <div id="box" class="transitions">
			<div class="slidecontainer">
				<div class="slide current">
					<ul id="grid">
						<li id="wordpress"><a href="installer.php?app=wordpress">WordPress</a></li>
						<li id="bbpress"><a href="installer.php?app=bbpress">bbPress</a></li>
						<li id="mediawiki"><a href="installer.php?app=mediawiki">Media Wiki</a></li>
						<li id="joomla"><a href="installer.php?app=joomla">Joomla</a></li>
						<li id="phpbb"><a href="installer.php?app=phpbb">phpBB</a></li>
						<li id="drupal"><a href="installer.php?app=drupal">Drupal</a></li>
						<li id="trac"><a href="installer.php?app=trac">Trac</a></li>
					</ul>
				</div>
			</div>
	    </div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js"></script>
		<script type="text/javascript">
			(function($)
			{
				$.fn.transition = function(url, options)
				{
					div = this;
					var defaults =
					{
						transitionType : 'slide',
						slideBack : false,
						duration : 500,
						loadingGif : 'loading.gif',
					}
					var options = $.extend(defaults, options);
					//display loading gif
					loadingstring = '<img class="loading" src="' + options.loadingGif + '"/ > ';
					$(div).find('div.slide.current').fadeTo("fast", 0.5);
					$('body').append('<div class="ajaxTemp"></div>');
					$('div.ajaxTemp').hide();
					$('div.ajaxTemp').load(url, function()
					{
						//$('img.loading').fadeOut(200, function(){$(this).remove()});
						var ajaxHtml = $('div.ajaxTemp').html();
						if(options.transitionType == 'fade')
						{
							$(div).find('div.slide.current').fadeOut("fast", function () 
							{
								$(div).find('div.slide.current').removeClass('current'); //make slide non-current
								$(div).find('div.slidecontainer').append('<div class="slide current"></div>') //append next slide
								$(div).find('div.slide.current').html(ajaxHtml); //make new slide current, add content
								$('div.ajaxTemp').remove(); //remove temp ajax div
								$(div).find('div.slide.current').fadeIn("fast"); //fade in new div
							});
						}
						else if(options.transitionType == 'slide')
						{
							$(div).find('div.slide.current').removeClass('current'); //make slide non-current
							var containerwidth = $(div).find('div.slidecontainer').width() //get width of slide container
							$(div).find('div.slidecontainer').width(containerwidth * 2); //make slide container width*2
							$(div).find('div.slidecontainer').append('<div class="slide current"></div>') //append next slide
							$(div).find('div.slide.current').html(ajaxHtml); //make new slide current, add content
							$(div).scrollTo( $('div.slide.current'), 500, { margin: true, onAfter: function ()
							{
								$(div).find('div.slide.current').prev().hide();
								$(div).find('div.slidecontainer').css(containerwidth);
								$(div).scrollLeft(0);
							}})
						}
					});
				}
			})(jQuery);
			$(document).ready(function ()
			{
				$('#wordpress a').click(function ()
				{
					$('div.transitions').transition('worknow.html');
					return false;
				});
			});
		</script>

	</body>
</html>
<!--  Chat, Notes, Comments, ToDo List, etc...

Todo
----------------------------
	Replace the text with the icons. @Joel
	
-->